﻿
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>websocket在线测试</title>
    <meta content="WebSocket 在线测试 工具 物联网" name="description">
    <meta content="WebSocket 在线测试 工具 物联网" name="keywords">
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <meta charset="utf-8" />
</head>
<body>
    <div>
        <div class="zone_conn">
            <input type="text" class="form-control" style="float:left;" id="inp_url" value="ws://127.0.0.1:7001/ws?token=bcaaf437405f04ef036b0e0f42d2ec26&appkey=sys-server" placeholder="连接的地址" />
            <button type="button" id="btn_conn" class="btn btn-primary" style="float:left;margin-left:10px;margin-right:10px;" onclick="fun_initWebSocket();">连接</button>
            <button type="button" id="btn_close" class="btn btn-danger" style="float:left;" disabled="disabled" onclick="fun_close();">断开</button>
        </div>
        <div class="clearboth" style='width:430px;'>
            1、连接格式为 ws://IP或域名:端口（示例ws://127.0.0.1:7001/ws）<br />
            2、对于<span style="color:red">内网</span>的测试环境，只需填入服务端的<span style="color:red">内网IP</span>和端口<br />
            3、可连接我上面提供的服务端ws地址来测试您<span style="color:red">自己的客户端</span>
        </div>
        <div class="zone_send">
            <a id="emoji" style="position:relative;left:374px;bottom:5px;cursor:pointer;" data-toggle="popover" title="表情"><img style="outline-width:40px;" src="picture/huanglianwx_thumb.gif" />表情</a>
            <textarea id="inp_send" class="form-control" style="height:100px;" placeholder="发送的内容"></textarea>
            <br />
            <button type="button" id="btn_send" class="btn btn-info" onclick="fun_sendto();">发送（ctrl+回车）</button>

            <!--<div data-toggle="modal" data-target="#myModal" style='color:blue;line-height:30px;font-size:16px;cursor:pointer;text-decoration:underline;'><img src="picture/wexin.png" height="30" style="margin-right:10px;" />联系作者</div>-->
        </div>
    </div>
    <div style="position:absolute;top:20px;left:470px;">
        <div id="div_msgzone" class="panel panel-default">
            <div class="panel-heading">消息窗口</div>
            <div id="div_msg" class="panel-body"></div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">感谢捐赠</h4>
                </div>
                <div class="modal-body" style="text-align:center;">
                    感谢您对作者的捐赠，您的付出都是对作者更好的呈现一些websocket体验的支持。
                    <br />
                 <div style='color:green;font-weight:900;margin-top:5px;margin-bottom:5px;margin-left:10px;'><img src="picture/wexin.png" height="30" />微信：yaohuang46（请备注开发语言）</div>
                 <div style='color:green;font-weight:900;margin-bottom:5px;'><img src="picture/qq.png" height="30" />QQ ：114687576（请备注开发语言）</div>
                    <img src="picture/weixin.png" height="200" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>

    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>
</html>
